<template>
  <div>
    <HomeHeader></HomeHeader>
    <Swiper :list="swiperList"></Swiper>
    <Icons :list="iconList"></Icons>
    <RecommendIcons :list="recommendList"></RecommendIcons>
    <HomeWeekend></HomeWeekend>
  </div>
</template>

<script>
import HomeHeader from "./Components/Header";
import Swiper from "./Components/Swiper";
import Icons from "./Components/Icons";
import RecommendIcons from "./Components/Recommend";
import HomeWeekend from "./Components/HomeWeekend";
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {
    HomeHeader,
    Swiper,
    Icons,
    RecommendIcons,
    HomeWeekend
  },
  computed: {
    ...mapState(["city"])
  },
  methods: {
    getHomeInfo() {
      axios.get(`/api/index.json?city=${this.city}`).then(this.getHomeInfoSucc);
    },
    getHomeInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
      }
    }
  },
  data() {
    return {
      lastCity: "",
      swiperList: [],
      iconList: [],
      recommendList: []
    };
  },
  mounted() {
    this.lastCity = this.city;
    this.getHomeInfo();
  },
  activated() {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  }
};
</script>

<style scoped>
</style>
